<script setup>
import { getCurrentInstance, ref, watch } from 'vue'
import mapComponent from '@/components/mapComponent/index.vue'

const { proxy } = getCurrentInstance()
const mapComponentRef = ref()
const measureDistanceChecked = ref(false)
const measureAreaChecked = ref(false)
const measureHeightChecked = ref(false)
const rollerShutterChecked = ref(false)
const rollerShutterClipChecked = ref(false)
const overViewChecked = ref(false)
const profileAnalysisChecked = ref(false)
const inundationAnalysisChecked = ref(false)
const load3DTileSetChecked = ref(false)
const loadgltfAirChecked = ref(false)
const radiationPatternChecked = ref(false)
const dynamicWallsChecked = ref(false)
const gIFMoveChecked = ref(false)
const windyFarmsChecked = ref(false)
const circularDiffusionChecked = ref(false)
const flyingLineChecked = ref(false)
const fourColorMapChecked = ref(false)
const flowingWaterChecked = ref(false)
const fireParticesChecked = ref(false)
const fogParticlesChecked = ref(false)
const rainEffectChecked = ref(false)
const snowFlakeEffectChecked = ref(false)
// 基础操作
const handleFoundationCommand = (command) => {
  switch (command) {
    case 'zoomIn':
      zoomIn()
      break
    case 'zoomOut':
      zoomOut()
      break
    case 'reset':
      reset()
      break
    case 'switchDimensional':
      switchDimensional()
      break
    case 'exportMap':
      exportMap()
      break
  }
}
// 空间几何
const handleGeometriesCommand = (command) => {
  addGeometries(command)
}
// 图层切换
const handleLayerCommand = (command) => {
  switch (command) {
    case 'ImageryLayer':
      toggleImageryLayer()
      break
    case 'TerrainLayer':
      toggleTerrainLayer()
      break
    case 'VectorLayer':
      toggleVectorLayer()
      break
  }
}
// 常用效果
const handleEffectCommand = (command) => {
  switch (command) {
    case 'EarthRotation':
      enableEarthRotation()
      break
    case 'FoggyTurn':
      enableFoggyTurn()
      break
    case 'DayNightTurn':
      enableDayNightTurn()
      break
    case 'AtmosphereTurn':
      enableAtmosphereTurn()
      break
    case 'TerrainLoad':
      enableTerrainLoad()
      break
    case 'ChinaProvinces':
      addChinaProvinces()
      break
  }
}
// 工具
const handleToolsCommand = (command) => {
  switch (command) {
    case 'overView':
      addOverView('影像图')
      break
  }
}
// 添加材质
const handleMaterialsCommand = (command) => {
  switch (command) {
    case 'RadiationPattern':
      addRadiationPattern()
      break
    case 'DynamicWalls':
      addDynamicWalls()
      break
    case 'GIFMove':
      addGIFMove()
      break
    case 'WindyFarms':
      addWindyFarms()
      break
    case 'CircularDiffusion':
      addCircularDiffusion()
      break
    case 'FlyingLine':
      addFlyingLine()
      break
    case 'FourColorMap':
      addFourColorMap()
      break
    case 'FlowingWater':
      addFlowingWater()
      break
    case 'FirePartices':
      addFirePartices()
      break
    case 'FogParticles':
      addFogParticles()
      break
    case 'RainEffect':
      addRainEffect()
      break
    case 'SnowFlakeEffect':
      addSnowFlakeEffect()
      break
  }
}
// 动态绘制
const handleEditCommand = (command) => {
  addDrawUtil(command)
}
// 空间分析
const handleAnalyseCommand = (command) => {
  console.log(command)
}
// 地图放大
const zoomIn = () => {
  // 调用子组件的方法就不需要再传值mapViewer
  mapComponentRef.value.zoomInFunc()
}
// 地图缩小
const zoomOut = () => {
  mapComponentRef.value.zoomOutFunc()
}
// 地图复位
const reset = () => {
  mapComponentRef.value.resetFunc()
}
// 地图二三维切换
const switchDimensional = () => {
  mapComponentRef.value.switchDimensionalFunc()
}
// 导出地图为图片
const exportMap = () => {
  mapComponentRef.value.exportMapFunc()
}
// 测量距离
const addMeasureDistance = () => {
  mapComponentRef.value.addMeasureDistanceFunc(measureDistanceChecked.value)
  measureDistanceChecked.value = !measureDistanceChecked.value
}
// 测量面积
const addMeasureArea = () => {
  mapComponentRef.value.addMeasureAreaFunc(measureAreaChecked.value)
  measureAreaChecked.value = !measureAreaChecked.value
}
// 测量高程
const addMeasureHeight = () => {
  mapComponentRef.value.addMeasureHeightFunc(measureHeightChecked.value)
  measureHeightChecked.value = !measureHeightChecked.value
}
// 更换为影像图
const toggleImageryLayer = () => {
  mapComponentRef.value.toggleImageryLayerFunc()
}
// 更换为地形图
const toggleTerrainLayer = () => {
  mapComponentRef.value.toggleTerrainLayerFunc()
}
// 更换为矢量图
const toggleVectorLayer = () => {
  mapComponentRef.value.toggleVectorLayerFunc()
}
// 地球自转
const enableEarthRotation = () => {
  mapComponentRef.value.enableEarthRotationFunc()
}
// 开启雾天
const enableFoggyTurn = () => {
  mapComponentRef.value.enableFoggyTurnFunc()
}
// 开启昼夜
const enableDayNightTurn = () => {
  mapComponentRef.value.enableDayNightTurnFunc()
}
// 开启大气层
const enableAtmosphereTurn = () => {
  mapComponentRef.value.enableAtmosphereTurnFunc()
}
// 开启地形
const enableTerrainLoad = () => {
  mapComponentRef.value.enableTerrainLoadFunc()
}
// 添加中国省份
const addChinaProvinces = () => {
  mapComponentRef.value.addChinaProvincesFunc()
}
// 添加卷帘分析
const addRollerShutter = () => {
  mapComponentRef.value.addRollerShutterFunc(rollerShutterChecked.value)
  rollerShutterChecked.value = !rollerShutterChecked.value
}
// 添加卷帘分析 + 分割按钮
const addRollerShutterClip = () => {
  mapComponentRef.value.addRollerShutterClipFunc(rollerShutterClipChecked.value)
  rollerShutterClipChecked.value = !rollerShutterClipChecked.value
}
// 添加绘画工具
const addDrawUtil = (type) => {
  mapComponentRef.value.addDrawUtilFunc(type, proxy.$refs.drawPoint.$el.parentNode)
}

// 添加鹰眼控件
const addOverView = (type) => {
  mapComponentRef.value.addOverViewFunc(overViewChecked.value, type)
  overViewChecked.value = !overViewChecked.value
}
// 更换鹰眼数据源
const toggleOverView = (type) => {
  mapComponentRef.value.addOverViewFunc(false, type)
}
// 添加剖面分析
const addProfileAnalysis = () => {
  mapComponentRef.value.addProfileAnalysisFunc(profileAnalysisChecked.value, proxy.$refs.profileAnalysis.$el.parentNode)
  profileAnalysisChecked.value = !profileAnalysisChecked.value
}
// 添加淹没分析
const addInundationAnalysis = () => {
  mapComponentRef.value.addInundationAnalysisFunc(inundationAnalysisChecked.value, proxy.$refs.inundationAnalysis.$el.parentNode)
  inundationAnalysisChecked.value = !inundationAnalysisChecked.value
  console.log(inundationAnalysisChecked.value);
}
// 添加空间几何
const addGeometries = (type) => {
  mapComponentRef.value.addGeometriesFunc(type)
}
// 添加3DTiles模型
const load3DTileSet = () => {
  mapComponentRef.value.load3DTileSetFunc(load3DTileSetChecked.value)
  load3DTileSetChecked.value = !load3DTileSetChecked.value
}
// 添加GLB模型
const loadgltfAirPort = () => {
  mapComponentRef.value.loadgltfAirPortFunc(loadgltfAirChecked.value)
  loadgltfAirChecked.value = !loadgltfAirChecked.value
}
// 添加辐射图
const addRadiationPattern = () => {
  mapComponentRef.value.addRadiationPatternFunc(radiationPatternChecked.value)
  radiationPatternChecked.value = !radiationPatternChecked.value
}
// 添加动态墙
const addDynamicWalls = () => {
  mapComponentRef.value.addDynamicWallsFunc(dynamicWallsChecked.value)
  dynamicWallsChecked.value = !dynamicWallsChecked.value
}
// 添加GIF动图
const addGIFMove = () => {
  mapComponentRef.value.addGIFMoveFunc(gIFMoveChecked.value)
  gIFMoveChecked.value = !gIFMoveChecked.value
}
// 添加风场
const addWindyFarms = () => {
  mapComponentRef.value.addWindyFarmsFunc(windyFarmsChecked.value)
  windyFarmsChecked.value = !windyFarmsChecked.value
}
// 添加圆扩散
const addCircularDiffusion = () => {
  mapComponentRef.value.addCircularDiffusionFunc(circularDiffusionChecked.value)
  circularDiffusionChecked.value = !circularDiffusionChecked.value
}
// 添加飞线效果
const addFlyingLine = () => {
  mapComponentRef.value.addFlyingLineFunc(flyingLineChecked.value)
  flyingLineChecked.value = !flyingLineChecked.value
}
// 添加四色图
const addFourColorMap = () => {
  mapComponentRef.value.addFourColorMapFunc(fourColorMapChecked.value)
  fourColorMapChecked.value = !fourColorMapChecked.value
}
// 添加流动水图
const addFlowingWater = () => {
  mapComponentRef.value.addFlowingWaterFunc(flowingWaterChecked.value)
  flowingWaterChecked.value = !flowingWaterChecked.value
}
// 添加火焰粒子
const addFirePartices = () => {
  mapComponentRef.value.addFireParticesFunc(fireParticesChecked.value)
  fireParticesChecked.value = !fireParticesChecked.value
}
// 添加大雾粒子
const addFogParticles = () => {
  mapComponentRef.value.addFogParticlesFunc(fogParticlesChecked.value)
  fogParticlesChecked.value = !fogParticlesChecked.value
}
// 添加下雨效果
const addRainEffect = () => {
  mapComponentRef.value.addRainEffectFunc(rainEffectChecked.value)
  rainEffectChecked.value = !rainEffectChecked.value
}
// 添加雪花效果
const addSnowFlakeEffect = () => {
  mapComponentRef.value.addSnowFlakeEffectFunc(snowFlakeEffectChecked.value)
  snowFlakeEffectChecked.value = !snowFlakeEffectChecked.value
}

</script>

<template>
  <map-component ref="mapComponentRef"></map-component>
  <div class="gis-control">
    <el-dropdown @command="handleFoundationCommand">
      <el-button type="primary">
        基础操作
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zoomIn">地图放大</el-dropdown-item>
          <el-dropdown-item command="zoomOut">地图缩小</el-dropdown-item>
          <el-dropdown-item command="reset">地图复位</el-dropdown-item>
          <el-dropdown-item command="switchDimensional">地图二三维切换</el-dropdown-item>
          <el-dropdown-item command="exportMap">导出地图为图片</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleGeometriesCommand">
      <el-button type="primary">
        空间几何
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="PicturePoint">图标点加载</el-dropdown-item>
          <el-dropdown-item command="OriginalPoint">原始点加载</el-dropdown-item>
          <el-dropdown-item command="FlowLine">流动线加载</el-dropdown-item>
          <el-dropdown-item command="ColorLine">彩色线加载</el-dropdown-item>
          <el-dropdown-item command="addPolygon">面加载</el-dropdown-item>
          <el-dropdown-item command="removeGeometries">清除几何</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleGeometriesCommand">
      <el-button type="primary">
        测量
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="measureDistance">
            <el-checkbox :checked=measureDistanceChecked @click="addMeasureDistance" label="测量距离" />
          </el-dropdown-item>
          <el-dropdown-item command="measureArea">
            <el-checkbox :checked=measureAreaChecked @click="addMeasureArea" label="测量面积" />
          </el-dropdown-item>
          <el-dropdown-item command="measureHeight">
            <el-checkbox :checked=measureHeightChecked @click="addMeasureHeight" label="测量高程" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleLayerCommand">
      <el-button type="primary">
        图层
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="ImageryLayer">影像图</el-dropdown-item>
          <el-dropdown-item command="TerrainLayer">地形图</el-dropdown-item>
          <el-dropdown-item command="VectorLayer">矢量图</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleEffectCommand">
      <el-button type="primary">
        常用效果
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="EarthRotation">地球自转</el-dropdown-item>
          <el-dropdown-item command="FoggyTurn">开启雾天</el-dropdown-item>
          <el-dropdown-item command="DayNightTurn">开启昼夜</el-dropdown-item>
          <el-dropdown-item command="AtmosphereTurn">开启大气层</el-dropdown-item>
          <el-dropdown-item command="TerrainLoad">加载地形</el-dropdown-item>
          <el-dropdown-item command="ChinaProvinces">全国省份</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleEditCommand">
      <el-button type="primary">
        动态绘制 & 标绘
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="drawPoint" ref="drawPoint">点</el-dropdown-item>
          <el-dropdown-item command="drawLineString" ref="drawLineString">线</el-dropdown-item>
          <el-dropdown-item command="drawPolygon" ref="drawPolygon">多边形</el-dropdown-item>
          <el-dropdown-item command="drawCircle" ref="drawCircle">圆</el-dropdown-item>
          <el-dropdown-item command="drawRectangle" ref="drawRectangle">矩形</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleAnalyseCommand">
      <el-button type="primary">
        分析
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="rollerShutter">
            <el-checkbox :checked=rollerShutterChecked @click="addRollerShutter" label="卷帘分析" />
          </el-dropdown-item>
          <el-dropdown-item command="rollerShutterClip">
            <el-checkbox :checked=rollerShutterClipChecked @click="addRollerShutterClip" label="卷帘分析 + 分割按钮" />
          </el-dropdown-item>
          <el-dropdown-item command="profileAnalysis" ref="profileAnalysis">
            <el-checkbox :checked=profileAnalysisChecked @click="addProfileAnalysis" label="剖面分析" />
          </el-dropdown-item>
          <el-dropdown-item command="inundationAnalysis" ref="inundationAnalysis">
            <el-checkbox :checked=inundationAnalysisChecked @click="addInundationAnalysis" label="淹没分析" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleToolsCommand">
      <el-button type="primary">
        工具
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu class="dropdownTool">
          <el-dropdown-item command="overView">
            <el-checkbox label="鹰眼-多视图模式" />
          </el-dropdown-item>
          <el-button-group class="overViewGroup">
            <el-button type="primary" @click="toggleOverView('影像图')">影像图</el-button>
            <el-button type="primary" @click="toggleOverView('地形图')">地形图</el-button>
            <el-button type="primary" @click="toggleOverView('矢量图')">矢量图</el-button>
          </el-button-group>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown @command="handleMaterialsCommand">
      <el-button type="primary">
        材质
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="RadiationPattern">
            <el-checkbox label="辐射图" />
          </el-dropdown-item>
          <el-dropdown-item command="DynamicWalls">
            <el-checkbox label="动态墙" />
          </el-dropdown-item>
          <el-dropdown-item command="GIFMove">
            <el-checkbox label="GIF动图" />
          </el-dropdown-item>
          <el-dropdown-item command="WindyFarms">
            <el-checkbox label="风场" />
          </el-dropdown-item>
          <el-dropdown-item command="CircularDiffusion">
            <el-checkbox label="圆扩散" />
          </el-dropdown-item>
          <el-dropdown-item command="FlyingLine">
            <el-checkbox label="飞线效果" />
          </el-dropdown-item>
          <el-dropdown-item command="FourColorMap">
            <el-checkbox label="四色图" />
          </el-dropdown-item>
          <el-dropdown-item command="FlowingWater">
            <el-checkbox label="流动水图" />
          </el-dropdown-item>
          <el-dropdown-item command="FirePartices">
            <el-checkbox label="火焰粒子" />
          </el-dropdown-item>
          <el-dropdown-item command="FogParticles">
            <el-checkbox label="大雾粒子" />
          </el-dropdown-item>
          <el-dropdown-item command="RainEffect">
            <el-checkbox label="下雨效果" />
          </el-dropdown-item>
          <el-dropdown-item command="SnowFlakeEffect">
            <el-checkbox label="雪花效果" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown>
      <el-button type="primary">
        模型
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu class="dropdownTool">
          <el-dropdown-item command="load3DTileSet">
            <el-checkbox :checked=load3DTileSetChecked @click="load3DTileSet" label="3DTiles模型" />
          </el-dropdown-item>
          <el-dropdown-item command="loadgltfAirPort">
            <el-checkbox :checked=loadgltfAirChecked @click="loadgltfAirPort" label="glb飞机" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss">
.gis-control {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 217, 0, 0.418);

  .el-dropdown {
    margin-right: 10px;
  }
}

.dropdownTool {
  width: 300px;

  .overViewGroup {
    margin: 0 40px;
  }
}
</style>
